<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人详情</title>
		<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/header.css" />

		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>

		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#login " aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
					<a class="navbar-brand" href="index.html"> <img alt="Brand" src="img/logo.jpg"></a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9" aria-expanded="false">
					<!-- 登录成功之前：	-->
					<ul class="nav navbar-nav navbar-right" id="noLogin">
						<li>
							<a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span>登录</a>
						</li>
						<li>
							<a href="#" data-toggle="modal" data-target="#myModal1"><span class="glyphicon glyphicon-user"></span>注册</a>
						</li>
					</ul>

					<!-- 登录成功之后：-->
					<ul class="nav navbar-nav navbar-right" style="display: none;" id="logined">
						<script type="text/template" id="loginedTpl">
							<li>
								<img src="<%= user.photo %>" width="50" height="50" class="img-rounded" />
							</li>
							<li>
								<a href="javascript:void(0)" title="点击查看<%= user.code %>的个人资料"><strong>欢迎您，<%= user.code %></strong></a>
							</li>
							<li>
							<a href="Background.html"><i class="glyphicon glyphicon-pencil"></i> 写博客</a>
							</li>
							<li>
								<a href="javascript:void(0);" id="logout">退出</a>
							</li>
						</script>
					</ul>
				</div>
			</div>
		</nav>
		<!--登录-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">登录</h4>
					</div>
					<form class="form-signin" role="form">
						<input type="text" class="form-control" placeholder="请输入用户名" required id="loginCode">
						<input type="password" class="form-control" placeholder="请输入密码" required id="loginPassword">
						<div class="checkbox">
							<label><input type="checkbox" value="rememberMe" id="rememberMe" checked="checked"> 自动登录</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="button" id="loginButton" data-loading-text="登录中...">登录</button>
					</form>
				</div>
			</div>
		</div>
		<!--注册-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">注册</h4>
					</div>
					<form class="form-signin" role="form">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入用户名" id="registerCode">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="请输入密码" id="registerPassword">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="请确认密码" id="registerConfirmPassword">
						</div>
						<button type="button" class="btn btn-lg btn-primary btn-block" type="submit" id="registerBtn" data-loading-text="注册中..." autocomplete="off">注册</button>
					</form>
				</div>
			</div>
		</div>

		<div class="ba" id="banner">
			<script type="text/template" id="bannerTpl">
				<h1 class="blogname"><%= blog_name %></h1>
				<p><q><%= blog_description %></q></p>
			</script>
		</div>
		<section class=" container content">
			<div class="col-md-8">
				<ul class="clearfix" style="text-align: center;position: relative;top: -90px;">
					<li class="list clearfix">
						<div class="list-tit " id="artileDetail">
							<script type="text/template" id="artileDetailTpl">
								<h2 class="title"><%= article.title %></h2>
								<div class="item1">
									<span class="glyphicon glyphicon-th-large"></span>
									<span class="classify"><%= article.category_name %></span>

									<span class="glyphicon glyphicon-time"></span>
									<span class="introduce-time"><%= article.create_time%></span>
									<span class="glyphicon glyphicon-heart"></span>

									<span class="read"><span class="read-more"><%= article.read_times %></span></span>
								</div>
								<p>
									<%= article.content %>
								</p>
							</script>
						</div>
					</li>
				</ul>
				<div class="row ">
					<ul class="list-group" id="disscuss">
						<li class="list-group-item  active ">评论列表</li>
						<script type="text/template" id="discussTpl">
							<% for (var i = 0; i < disscusses.length; i++) { %>
							<% var disscuss = disscusses[i];%>
							<li class="list-group-item">
								<div class="media">
									<a class="pull-left" href="#">
										<img class="media-object" src="<%= disscuss.photo %>" height="100" ;width="100">
									</a>
									<div class="media-body">
										<h4 class="media-heading"><%= disscuss.blog_name %></h4>
										<p>
											<%= disscuss.content %>
										</p>
										<p class="item">
											<span class="introduce-time"><%= disscuss.create_time %></span>&nbsp;&nbsp;

											<span class="reply" style="float: right;">
											<!--<i class=" glyphicon glyphicon-thumbs-up" data-disscussid="<%= disscuss.id %>">&nbsp;<%= disscuss.agree %></i> 
											<i class=" glyphicon glyphicon-thumbs-down" data-disscussid="<%= disscuss.id %>">&nbsp;<%= disscuss.argue %></i>-->
											<i class="glyphicon glyphicon-thumbs-up" style="font-size: 20px;"  data-disscussid="<%= disscuss.id %>">&nbsp;<span><%= disscuss.agree %></span></i>
											<i class="glyphicon glyphicon-thumbs-down" style="font-size: 20px;" data-disscussid="<%= disscuss.id %>">&nbsp;<span><%= disscuss.argue %></span></i>
											</span>
									</div>
								</div>
							</li>
							<% } %>
						</script>
						
					</ul>
					<form action="" method="post">
						<div class="form-group">
							<textarea class="form-control comment" placeholder="请发表评论，评论长度在200字以内"  id="disucssContent"></textarea>
						</div>
						<button type="button" class="btn btn-primary btn-block " id="addDiscussBtn">发表</button>
					</form>
				</div>
			</div>
			<div class="col-md-4 hidden-xs hidden-sm">
				<ul class="list-group  rr"id="readRanks">
					<li class="list-group-item active">阅读排行</li>
					<script type="text/template" id="readRankTpl">
						<% for (var i = 0; i < readRanks.length; i++) { %>
						<% var readRank = readRanks[i]; %>
						<li class="list-group-item">
							<a href="detail.html?article_id=<%= readRank.id %>&user_id=<%= readRank.user_id %>" title="<%= readRank.title %>"><%= (i + 1) + '、' + (readRank.title.length > 8 ? readRank.title.substring(0, 8) + '...' : readRank.title) %></a><span class="badge"><%= readRank.read_times %></span>
						</li>
						<% } %>
					</script>
				</ul>
				<ul class="list-group" id="category">
					<li class="list-group-item active">文章分类</li>
					<script type="text/template" id="categoryTpl">
						<% for (var i = 0; i < categories.length; i++) { %>
							<% var category = categories[i]; %>
							<li class="list-group-item"><a href=""><%= i + 1 %>、<%= category.name %> </a><span class="badge"> <%= category.count %> </span></li>
						<% } %>
					</script>
				</ul>
			</div>
		</section>

		<!--<div class="list-group container">
       	<div class="col-lg-6 ">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <div class="media">
      <div class="media-left">
        <a href="#">
          <img data-holder-rendered="true" src="img/50 (1).jpg" style="width: 64px; height: 64px;" class="media-object" data-src="holder.js/64x64" alt="64x64">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">颐和园西堤桃花开</h4>
       <p>24-70早春三月春花绽放,颐和园西堤桃花如期盛开.西堤上桃红柳绿...</p> 
       <p class="item">
										<span class="introduce-time">2016-12-28</span>&nbsp;&nbsp;
										<span class="introduce-time">12:45</span>
										<span class="reply">					
										</span>
									</p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img data-holder-rendered="true" src="img/50 (1).jpg" style="width: 64px; height: 64px;" class="media-object" data-src="holder.js/64x64" alt="64x64">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">颐和园西堤桃花开</h4>
       <p>24-70早春三月春花绽放,颐和园西堤桃花如期盛开.西堤上桃红柳绿...</p> 
       <p class="item">
										<span class="introduce-time">2016-12-28</span>&nbsp;&nbsp;
										<span class="introduce-time">12:45</span>
										<span class="reply">					
										</span>
									</p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img data-holder-rendered="true" src="img/50 (1).jpg" style="width: 64px; height: 64px;" class="media-object" data-src="holder.js/64x64" alt="64x64">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">颐和园西堤桃花开</h4>
       <p>24-70早春三月春花绽放,颐和园西堤桃花如期盛开.西堤上桃红柳绿...</p> 
       <p class="item">
										<span class="introduce-time">2016-12-28</span>&nbsp;&nbsp;
										<span class="introduce-time">12:45</span>
										<span class="reply">					
										</span>
									</p>
      </div>
    </div>
    <div class="media ">
      <div class="media-left">
        <a href="#">
          <img data-holder-rendered="true" src="img/50 (1).jpg" style="width: 64px; height: 64px;" class="media-object" data-src="holder.js/64x64" alt="64x64">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">颐和园西堤桃花开</h4>
       <p>24-70早春三月春花绽放,颐和园西堤桃花如期盛开.西堤上桃红柳绿...</p> 
       <p class="item">
										<span class="introduce-time">2016-12-28</span>&nbsp;&nbsp;
										<span class="introduce-time">12:45</span>
										<span class="reply">					
										</span>
									</p>
      </div>
    </div>
  </div>
</div>-->
		<script src="vendor/lodash.js"></script>
		<script src="vendor/jquery.min.js"></script>
		<script src="vendor/bootstrap.min.js"></script>
		<script src="vendor/layer-v3.0.3/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/header.js" ></script>
		<script src="js/geren-common.js" ></script>
		<script src="js/detail.js"></script>
	</body>

</html>